﻿@import "../../../css/variables";
$header-height: 46px;

$footer-single-path-detail-height: 77px;
$footer-single-path-height: $footer-single-path-detail-height;

$footer-multiple-path-tabs-height: 45px;
$footer-multiple-path-detail-height: 60px;
$footer-multiple-path-height: $footer-multiple-path-tabs-height + $footer-multiple-path-detail-height;


.map-container{
    position: absolute;
    left: 0;
    top: $header-height;
    width: 100%;
}

.footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    .tabs{
        box-sizing: border-box;
        height: $footer-multiple-path-tabs-height;
        text-align: center;
        font-size: 12px;
        display: flex;
        flex-flow: row nowrap;

        .tab{
            box-sizing: border-box;
            height: 100%;
            flex: 1 1 auto;
            background: #efefef;
            border-left: 1px solid #dfdfdf;
            border-top: 3px solid transparent;
            &.selected{
                background: white;
                color: $blue-color;
                border-top-color: $blue-color;
            }

            .time{
                margin: 2px 0;
            }
        }
    }

    .path-details{
        box-sizing: border-box;
        position: relative;
        overflow: hidden;

        .path-detail{
            box-sizing: border-box;
            position: absolute;
            left: 100%;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 0 9px;

            &.selected{
                left: 0;
            }

            .summary1{
                font-weight: bold;
                font-size: 14px;
                color: #333;
                margin: 4px 0;
            }

            .summary2{
                font-size: 14px;
                color: #333;
            }

            .summary3{
                margin-top: 5px;
                font-size: 13px;
                color: #999;
            }

            .detail-btn{
                color: $blue-color;
            }
        }
    }
}

.no-path{
    .map-container{
        bottom: 0;
    }

    .footer{
        height: 0;

        .path-details{
            height: 0;
        }
    }
}

.single-path{
    .map-container{
        bottom: $footer-single-path-height;
    }

    .footer{
        height: $footer-single-path-height;

        .path-details{
            height: $footer-single-path-detail-height;
        }
    }
}

.multiple-path{
    .map-container{
        bottom: $footer-multiple-path-height;
    }

    .footer{
        height: $footer-multiple-path-height;

        .path-details{
            height: $footer-multiple-path-detail-height;

            .summary2{
                margin-top: 9px;
            }
        }
    }
}